<template>
  <div class="header">
    <el-card>
      <div class="head_btn">
        <el-button size="small">所有消息</el-button>
        <el-button size="small" icon="el-icon-plus" @click="dialogFormVisible=true">添加内容</el-button>
      </div>
      <el-table :data="tableData" border size="small" stripe
                :header-cell-style="{textAlign:'center',backgroundColor:'#e4eaec'}"
                :cell-style="{textAlign: 'center'}">
        <el-table-column type="index" label="排序" width="70px"/>
        <el-table-column prop="title" label="标题" width="300px"/>
        <el-table-column prop="select" label="类型"/>
        <el-table-column prop="createTime" label="添加时间"/>
        <el-table-column prop="updateTime" label="更新时间"/>

        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button size="small" type="info" plain @click="edit(scope.row)">编辑</el-button>
            <el-button size="small" type="info" plain @click="dialogDel=true">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="fen">
        <div>共{{ total }}条，每页{{ queryIo.pageSize }}条</div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryIo.page"
          :page-sizes="[5, 7, 9, 11]"
          :page-size="queryIo.pageSize"
          layout=" jumper,prev, pager, next"
          :total="total"
          background>
        </el-pagination>
      </div>

    </el-card>

    <!--添加消息内容对话框-->
    <el-dialog :visible.sync="dialogFormVisible" class="add" width="35%">
      <template #title>
        <span class="dialogTitle">添加内容：</span>
      </template>

      <el-form :model="addForm" size="small" label-width="80px" label-position="left">
        <el-form-item label="标题">
          <el-input v-model="addForm.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="详细介绍">
          <el-input v-model="addForm.common" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="推送到">
          <el-radio-group v-model="addForm.select">
            <el-radio :label="1">公告</el-radio>
            <el-radio :label="2">帮助中心</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="small">提交</el-button>
      </div>
    </el-dialog>

    <!--删除对话框-->
    <el-dialog :visible.sync="dialogDel" class="del" width="35%">
      <template #title>
        <span>确定要删除该消息吗？</span>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDel = false" size="small">取消</el-button>
        <el-button @click="dialogDel = false" size="small">确定</el-button>
      </div>
    </el-dialog>

    <!--编辑对话框-->
    <el-dialog :visible.sync="dialogEdit" class="add" width="35%">
      <template #title>
        <span class="dialogTitle">编辑消息：</span>
      </template>

      <el-form :model="editForm" size="small" label-width="80px" label-position="left">
        <el-form-item label="标题">
          <el-input v-model="editForm.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="详细介绍">
          <el-input v-model="editForm.common" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="推送到">
          <el-radio-group v-model="editForm.select">
            <el-radio label="公告">公告</el-radio>
            <el-radio label="帮助中心">帮助中心</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEdit = false" size="small">提交</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      tableData: [
        {
          title: '黄金任务：30条/天/黄金以下任务全部可接',
          select: '公告',
          createTime: '2021-12-23 14:30:00',
          updateTime: '2021-12-27 09:27:36'
        },
        {
          title: '黄金任务：30条/天/黄金以下任务全部可接',
          select: '公告',
          createTime: '2021-12-23 14:30:00',
          updateTime: '2021-12-27 09:27:36'
        },
        {
          title: '黄金任务：30条/天/黄金以下任务全部可接',
          select: '公告',
          createTime: '2021-12-23 14:30:00',
          updateTime: '2021-12-27 09:27:36'
        },
        {
          title: '黄金任务：30条/天/黄金以下任务全部可接',
          select: '公告',
          createTime: '2021-12-23 14:30:00',
          updateTime: '2021-12-27 09:27:36'
        },
        {
          title: '黄金任务：30条/天/黄金以下任务全部可接',
          select: '公告',
          createTime: '2021-12-23 14:30:00',
          updateTime: '2021-12-27 09:27:36'
        },
        {
          title: '黄金任务：30条/天/黄金以下任务全部可接',
          select: '公告',
          createTime: '2021-12-23 14:30:00',
          updateTime: '2021-12-27 09:27:36'
        },
        {
          title: '黄金任务：30条/天/黄金以下任务全部可接',
          select: '公告',
          createTime: '2021-12-23 14:30:00',
          updateTime: '2021-12-27 09:27:36'
        },
      ],
      queryIo: {
        page: 1,
        pageSize: 7
      },
      total: 25,

      dialogFormVisible: false,
      dialogDel: false,
      dialogEdit: false,
      addForm: {
        select: 1,
      },
      editForm: {}

    }
  },
  methods: {
    //编辑
    edit(n) {
      console.log(n, 111)
      this.editForm = n
      this.dialogEdit = true
    },

    //第几页
    handleCurrentChange(p) {
      this.queryIo.page = p
    },

    //一页几条数据
    handleSizeChange(s) {
      this.queryIo.pageSize = s
    },
  },

}
</script>

<style lang="scss" scoped>
.header {
  margin: 30px;

  .head_btn {
    .el-button:nth-child(1) {
      background-color: #3cb3be;
      color: white;
    }

    .el-button:nth-child(2) {
      background-color: #437eb1;
      color: white;
    }
  }

  .el-table {
    margin-top: 15px;

    .el-button {
      background-color: #acbac2;
      color: white;
    }

  }

  .fen {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    div {
      font-size: 13px;
      color: #999999;
    }
  }
}

.el-pagination {
  ::v-deep .active {
    background-color: #acbac2 !important;
  }
}

//添加对话框
.add .el-dialog {
  .dialog-footer {
    text-align: center;

    .el-button {
      background-color: #2f71a9;
      color: white;
    }
  }
}

//删除对话框
.del {
  ::v-deep .el-dialog__body {
    padding: 10px 0;
  }

  .el-dialog {


    .dialog-footer {
      text-align: center;

      .el-button:nth-child(1) {
        background-color: #e3e4e8;
      }

      .el-button:nth-child(2) {
        background-color: #2f71a9;
        color: white;
      }
    }
  }
}

//所有单选
::v-deep .el-radio-group {
  display: flex;
  flex-direction: column;

  .el-radio {
    margin: 7px 0;
  }
}
</style>
